<template>
  <div class="index" v-loading="loading">
    <div class="policy-mian">
        <div class="policy-mian-top">
            <div class="title">选择项目进行政策匹配</div>
        </div>
        <div class="wrap">
            <div class="list flex-bett flex-wrap">
                <div class="li flex-jusa" @click="jump(item.id)" v-for="(item,index) in list" :key="index">
                   <div class="box">
                        <div class="icon"></div>
                        <div class="p1">{{item.name}}</div>
                        <div class="p2">{{item.name1}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <Pop @popTog="setTog" @alldata="alldataa" v-if="cloneIs"></Pop>
  </div>
</template>
<script>
import '@/assets/styles/policy-public.scss' // iboot css
import Pop from '@/views/components/policypop/pop'
import {getPolicyNaire} from '@/api/service/service'
export default {
  name: "index",
  data() {
    return {
        loading: false,
        cloneIs:false,
        checkedfonta:"",
        checkedfontb:"",
        list:[
            {id:4,name:'创业扶持',name1:'创业扶持相关政策'},
            {id:5,name:'奖励补贴',name1:'奖励补贴相关政策'},
            {id:6,name:'居留出入境',name1:'居留出入境相关政策'},
            {id:7,name:'落户',name1:'落户相关政策'},
            {id:8,name:'住房保障',name1:'住房保障相关政策'},
            {id:9,name:'健康医疗',name1:'健康医疗相关政策'},
        ],            //列表
        cateId:""
    }
  },
  components:{Pop},
    beforeRouteEnter (to, from, next) {
        next(vm => {
                //vm.beforeUrl = from.path
        })
    },
  mounted(){
  
      //this.checkedCities = 
  },
  created() { 

  },
  methods:{
      setTog(a){
        this.cloneIs = a;
      },
      alldataa(e){
          this.checkedfonta = e[0];
          this.checkedfontb = e[1];
          let data = {
              cityId:e[0],
              districtId:e[1],
              cateId:this.cateId
          };
          this.loading = true;
          getPolicyNaire(data).then(res=>{
              this.loading = false;
              if(res.resp_code === 0){
                  if(res.datas.questionList.length == 0){
                      this.$router.push({path:'/policy/matching?questionItemIds=&cateId='+this.cateId})
                  }else{
                      this.$router.push({path:'/policy/qa?cityId='+e[0]+'&districtId='+e[1]+'&cateId='+this.cateId})
                  }
                  
              }else{
                  this.$router.push({path:'/policy/matching?questionItemIds=&cateId='+this.cateId})
              }
              
          })
      },
      jump(i){
        this.cateId = i;
        this.cloneIs = true;
      },
      watcha(){
         
      }
  },
  
}
</script>
<style scoped>
.policy-mian .list{
    position: relative;
    z-index: 1;
}
.policy-mian .list .li{
    width: 387px;
    height: 224px;
    background: #FFFFFF;
    border-radius: 6px;
    margin-bottom: 20px;
}
.policy-mian .list .li .box{
    text-align: center;
    display: inline-block;
}
.policy-mian .list .li .box .icon{
    width: 88px;
    height: 88px;
    display: block;
    margin: auto;
}
.policy-mian .list .li:nth-child(1) .box .icon{
    background: url(../../assets/policy/support-icon1.png) center center no-repeat;
    background-size: cover;
}
.policy-mian .list .li:nth-child(2) .box .icon{
    background: url(../../assets/policy/support-icon2.png) center center no-repeat;
    background-size: cover;
}
.policy-mian .list .li:nth-child(3) .box .icon{
    background: url(../../assets/policy/support-icon3.png) center center no-repeat;
    background-size: cover;
}
.policy-mian .list .li:nth-child(4) .box .icon{
    background: url(../../assets/policy/support-icon4.png) center center no-repeat;
    background-size: cover;
}
.policy-mian .list .li:nth-child(5) .box .icon{
    background: url(../../assets/policy/support-icon5.png) center center no-repeat;
    background-size: cover;
}
.policy-mian .list .li:nth-child(6) .box .icon{
    background: url(../../assets/policy/support-icon6.png) center center no-repeat;
    background-size: cover;
}
.policy-mian .list .li .box .p1{
    font-size: 16px;
    line-height: 30px;
    padding-top: 18px;
    color: #343434;
}
.policy-mian .list .li .box .p2{
    color: #787878;
    font-size: 14px;
    line-height: 28px;
}


</style>
